<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3线性渐变</title>
	<style type="text/css" media="screen">
		div {
			width: 200px;
			height: 200px;
			line-height: 200px;
			text-align: center;
			border: 0px solid #2b6a9a;
			margin: 20px;
			float: left;
		}
		.toTop {
			background-image: -webkit-linear-gradient(top, red, green);
			background-image: linear-gradient(top, red, green);
		}
		.toRight {
			background-image: -webkit-linear-gradient(right, red, green);
			background-image: linear-gradient(right, red, green);
		}
		.toBottom {
			background-image: -webkit-linear-gradient(bottom, red, green);
			background-image: linear-gradient(bottom, red, green);
		}
		.toLeft {
			background-image: -webkit-linear-gradient(left, red, green);
			background-image: linear-gradient(left, red, green);
		}
		.toTopLeft {
			background-image: -webkit-linear-gradient(top left, red, green);
			background-image: linear-gradient(top left, red, green);
		}
		.toTopRight {
			background-image: -webkit-linear-gradient(top right, red, green);
			background-image: linear-gradient(top right, red, green);
		}
		.toBottomLeft {
			background-image: -webkit-linear-gradient(bottom left, red, green);
			background-image: linear-gradient(bottom left, red, green);
		}
		.toBottomRight {
			background-image: -webkit-linear-gradient(bottom right, red, green);
			background-image: linear-gradient(bottom right, red, green);
		}
		.toLeftTop {
			background-image: -webkit-linear-gradient(left top, red, green);
			background-image: linear-gradient(left top, red, green);
		}

		.toLeftBottom{
			background-image: -webkit-linear-gradient(left bottom, red, green);
			background-image: linear-gradient(left bottom, red, green);
		}
		.toRightTop{
			background-image: -webkit-linear-gradient(right top, red, green);
			background-image: linear-gradient(right top, red, green);
		}
		.toRightBottom{
			background-image: -webkit-linear-gradient(right bottom, red, green);
			background-image: linear-gradient(right bottom, red, green);
		}

	</style>
</head>
<body>
	<div class="toTop">To Top</div>
	<div class="toRight">To Rihgt</div>
	<div class="toBottom">To Bottom</div>
	<div class="toLeft">To Left</div>
	<div class="toTopLeft">To Top Left</div>
	<div class="toTopRight">To Top Right</div>
	<div class="toBottomLeft">To Bottom Left</div>
	<div class="toBottomRight">To Bottom Rihgt</div>
	<div class="toLeftTop">To Left Top</div>
	<div class="toLeftBottom">To Left Bottom</div>
	<div class="toRightTop">To Right Top</div>
	<div class="toRightBottom">To Right Bottom</div>

</body>
</html>